<!-- 收银台 -->
<template>
  <view class="pay-method-wrap">
    <view class="u-flex-col u-col-center money-box" v-if="price">
      <!-- <text class="time" v-show="isCountDown">{{ timeText }}</text> -->
      <view class="money">{{ type=='group'? '￥' + price :  price + '积分' }}</view>
    </view>

    <!-- 支付方式单选项 -->
    <!-- <u-radio-group v-if="payment" class="pay-box" v-model="payType" active-color="#f0c785"> -->
    <!-- 微信支付 -->
    <!-- <view class="u-flex u-row-between pay-item" v-show="payment.includes('wechat')" @tap="payType = 'wechat'"> -->
    <!-- <view class="u-flex">
					<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_wx_pay.png'" mode=""></image>
					<text>微信支付</text>
				</view>
				<u-radio shape="circle" name="wechat"></u-radio>
			</view> -->
    <!-- 支付宝支付 -->
    <!-- <view class="u-flex u-row-between pay-item" v-show="payment.includes('alipay')" @tap="payType = 'alipay'">
				<view class="u-flex">
					<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_ali_pay.png'" mode=""></image>
					<text>支付宝支付</text>
				</view>
				<u-radio shape="circle" name="alipay"></u-radio>
			</view> -->
    <!-- 苹果支付 -->
    <!-- <view class="u-flex u-row-between pay-item" v-show="payment.includes('iospay') && appPlatfrom === 'ios'" @tap="payType = 'iospay'">
				<view class="u-flex">
					<image class="pay-img" :src="$IMG_URL + '/imgs/order/order_apple_pay.png'" mode=""></image>
					<text>ApplePay</text>
				</view>
				<u-radio shape="circle" name="iospay"></u-radio>
			</view> -->
    <!-- 余额支付 -->
    <view class="pay-box">
      <view class="u-flex u-row-between pay-item" @tap="payType = 'wallet'">
        <view class="u-flex">
          <image class="pay-img" :src="$IMG_URL + '/imgs/order/order_wallet_pay.png'" mode=""></image>
          <text>余额</text>
        </view>
        <!-- <u-radio shape="circle" name="wallet"></u-radio> -->
        <view>{{ type=='group'? '￥' + money :  money + '积分' }}</view>
      </view>
    </view>
    <!-- </u-radio-group> -->

    <button class="u-reset-button pay-btn" @tap="getmoney()">确认支付
      {{ type=='group'? '￥' + price :  price + '积分' }}</button>

    <u-keyboard v-model="show" :tooltip="false" mode="number" :mask-close-able="false" :dot-enabled="false"
      @change="valChange" @backspace="backspace">
      <view class="pay-pwd">
        <view class="tit">
          <view>
            <u-icon name="close" @click="show = false"></u-icon>
          </view>
          <view>请输入支付密码</view>
          <view></view>
        </view>

        <u-message-input :value="paypassword" :disabled-keyboard="true" width="50" :maxlength="6" :breathe="true"
          :dot-fill="true"></u-message-input>
      </view>

    </u-keyboard>
    <!-- <ssPaymentPassword ref="paymentPassword" mode=1 @submit="submitHandle" /> -->
    <!-- 	<view class="keyboard-container">
			<uni-keyboard @completed="done" ref="keyboard"></uni-keyboard>
		</view> -->
    <!-- <u-popup v-model="show" mode="center">
				<view class="pop">
					<view class="text">
						请输入支付密码
					</view>
					<u-input v-model="paypassword" :type="type" :border="border"  placeholder="请输入支付密码" maxlength="6" @input="paypassword"/>
					<text>{{paypassword}}</text>
				</view>
		</u-popup> -->
    <u-modal v-if="type == 'goods'" v-model="model_show" content='您的积分不足' confirm-text="确定"
      @cancel="model_show = false"></u-modal>
    <u-modal v-else v-model="model_show" content="您的余额不足" :show-cancel-button="true" confirm-text="去充值"
      @cancel="model_show = false" @confirm="$Router.push({ path: '/pages/user/wallet/recharge' })"></u-modal>
    <u-toast ref="uToast" />
    <!-- 登录提示 -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
  import Pay from '@/shopro/pay';
  // import uniKeyboard from '@/components/uni-keyboard.vue'
  // import ssPaymentPassword from '@/components/sanshui-payment-password'
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';
  let timer;
  export default {
    components: {
      // ssPaymentPassword
    },
    data() {
      return {
        paypassword: '',
        type: '',
        border: true,
        payFlag: true,
        payType: '', //支付方式
        isCountDown: true, //是否显示订单倒计时。
        orderDetail: {},
        timeText: '', //倒计时文本
        platform: this.$platform.get(),
        appPlatfrom: '',
        money: '',
        show: false,
        addressId: '',
        goodsId: '',
        price: 0.00,
        model_show: false,
      };
    },
    created() {
      console.log(this.paypassword)
    },
    computed: {
      ...mapState({
        payment: ({
          shopro
        }) => shopro.config.payment
      })
    },
    onShow() {
      this.orderDetail.id && this.countDown();
      if (this.$Route.query.type == 'goods') {
        this.$http('money.ScoreLog').then(res => {
          this.money = res.data.now_score;
        })
      } else {
        this.$http('money.walletLog').then(res => {
          this.money = res.data.now_money;
        })
      }

    },
    onLoad() {
      // if(this.$platform.get() === 'wxOfficialAccount' && this.$platform.device() === 'ios' && this.$platform.entry() !== location.href) location.reload();
      // this.getOrderDetail();
      // if (this.payment.length) {
      // 	this.payType = this.payment[0];
      // }
      console.log(this.$Route.query, '路由船只')
      this.type = this.$Route.query.type;
      this.price = this.$Route.query.price;
    },
    onHide() {
      clearInterval(timer);
      timer = null;
    },
    watch: {
      show() {
        if (this.show == false) {
          this.paypassword = ''
        }
      }
    },
    methods: {
      submitHandle(e) {
        console.log(e);
        if (e.value == 111111) {
          pay = new Pay(this.payType, this.orderDetail);
        } else {
          this.$refs.uToast.show({
            title: '密码错误，请重试',
            type: 'warning',
            position: 'top'
          })
        }
      },
      // done(password) {
      // 	console.log(password);
      // 	console.log(this.$refs);
      // },
      valChange(val) {
        // 将每次按键的值拼接到value变量中，注意+=写法
        // #ifdef APP-VUE
        uni.vibrateShort();
        // #endif

        if (this.paypassword.length < 6) {
          this.paypassword += val;
        }
        if (this.paypassword.length == 6) {
          this.confirmPay();
        }
        console.log(this.paypassword);
      },
      // 退格键被点击
      backspace() {
        // #ifdef APP-VUE
        uni.vibrateShort();
        // #endif
        // 删除value的最后一个字符
        if (this.paypassword.length) this.paypassword = this.paypassword.substr(0, this.paypassword.length - 1);
        console.log(this.paypassword);
      },
      // 倒计时
      countDown() {
        let that = this;
        let t = parseInt(that.orderDetail.ext_arr.expired_time * 1000) - parseInt(new Date().getTime());
        t = t / 1000;
        timer = setInterval(() => {
          if (t > 0) {
            let time = that.$tools.format(t);
            that.timeText = `支付剩余时间 ${time.m}:${time.s}`;
            t--;
          } else {
            clearInterval(timer);
            that.timeText = '订单已过期!';
          }
        }, 1000);
      },

      // 发起支付
      popChose(url) {
        if (this.type)
          this.show = false;
        let that = this;
        that.isDisabled = true;
        let query = that.$Route.query;
        var data = {};
        if(that.type == 'goods'){
          data = {
            address_id: query.address_id,
            goods_id: query.goods_id,
            pay_password: that.paypassword,
            remarks:query.remarks,
			beizhu:query.beizhu
          }
        }else{
          data = {
            address_id: query.address_id,
            goods_id: query.goods_id,
            pay_password: that.paypassword,
            price:query.price,
			remarks:query.remarks,
			beizhu:query.beizhu
          }
        }
		console.log(data,'------')
       
        that.$http(
          url, data,
          '提交中...'
        ).then(res => {
          console.log(res.msg)
          that.paypassword = '';
          // if (res.data.group_id) {
          // this.group_id = res.data.group_id
          // this.open()
          // }
          if (res.code === 1) {
			  uni.navigateTo({
			  	url:`/pages/order/payment/result?payState=success&orderId=${res.data}&type=${that.type}&is_win=${that.type=='goods'? null:res.data.is_win}`
			  })
            // that.$Router.push({
            //   path: '/pages/order/payment/result',
            //   query: {
            //     payState: 'success',
            //     orderId: res.data,
            //     type: that.type,
            //     is_win: that.type=='goods'? null:res.data.is_win
            //   }
            // })
          }
          // uni.showToast({
          //   duration: 2000,
          //   icon: 'none',
          //   title: res.msg,
          //   success() {

          //   }
          // })
          that.isDisabled = false

        });
      },
      confirmPay() {
        if (this.type == 'group') {
          this.popChose('goods.groupindex');
        } else if (this.type == 'goods') {
          this.popChose('money.shop');
        }
        // this.$refs.paymentPassword.modalFun('show');
        // console.log(this.paypassword)
        // let that = this;
        // let pay = null;
        // if (!that.payType) {
        // 	this.$u.toast('请选择支付方式');
        // 	return;
        // }
        // if (that.payType === 'wallet') {

        // 	uni.showModal({
        // 		title: '支付提示',
        // 		confirmColor: '#f0c785',
        // 		content: `是否确认使用余额支付:${that.orderDetail.total_fee}元?`,
        // 		success: res => {
        // 			console.log(this.paypassword)
        // 			if (res.confirm) {
        // 				this.show=true

        // 				if(this.paypassword == 111111){
        // 						this.show=false
        // 						
        // 				}else{
        // 					console.log('密码错误')
        // 				}
        // 			}
        // 		}
        // 	});
        // } else {

        // 	pay = new Pay(that.payType, that.orderDetail);
        // }
      },
      getmoney() {
        if (parseFloat(this.price) > parseFloat(this.money)) {
          this.show = false;
          this.model_show = true;
        } else {
          this.show = true;
        }
      },
      // 支付信息
      getOrderDetail() {
        let that = this;
        that.$http('order.detail', {
          id: that.$Route.query.orderId
        }).then(res => {
          if (res.code === 1) {
            console.log(res.data)
            that.orderDetail = res.data;
            if (res.data.ext_arr !== null) {
              that.countDown();
            } else {
              that.isCountDown = false;
            }
          }
        });
      }
    }
  };
</script>

<style lang="scss">
  .money-box {
    background: #fff;
    height: 250rpx;
    margin-bottom: 20rpx;
    padding-top: 30rpx;

    .time {
      font-size: 28rpx;
      color: #c4c4c4;
    }

    .money {
      color: #e1212b;
      font-size: 60rpx;
      margin-top: 60rpx;

      &::before {
        // content: '￥';
        font-size: 46rpx;
      }
    }
  }

  .pop {
    margin: 30rpx;

    .text {
      margin-bottom: 20rpx;
    }
  }

  .pay-box {
    .pay-item {
      height: 90rpx;
      padding: 0 30rpx;
      font-size: 26rpx;
      background: #fff;
      width: 750rpx;
      border-bottom: 1rpx solid #eeeeee;

      &:last-child {
        border-bottom: none;
      }

      .pay-img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 25rpx;
      }
    }
  }

  .pay-btn {
    width: 690rpx;
    line-height: 80rpx;
    background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
    border-radius: 40rpx;
    color: rgba(#fff, 0.9);
    margin: 100rpx auto 0;
  }

  .pay-pwd {
    text-align: center;
    padding-top: 20rpx;

    .tit {
      display: flex;

      view {
        width: 50%;
      }

      view:nth-child(2n-1) {
        text-align: left;
        text-indent: 0.5em;
      }
    }
  }
</style>
